import { Form, Input, Button, Checkbox, message, Row, Col, Typography } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import { PhoneOutlined, LoadingOutlined, LockOutlined } from '@ant-design/icons';
import { Link, withRouter } from 'react-router-dom'
import { reg } from '../../utils/validate';
import { ajax } from '../../api';
import { toast } from '../../utils/commom';
import "./zhuce.scss"
const { Title } = Typography;


// 排版
const layout = {
    labelCol: {
        span: 4,
        offset: 2
    },
    wrapperCol: {
        span: 17,
        offset: 1
    }
}

const layout2 = {
    wrapperCol: {
        span: 17,
        offset: 7
    }
}
function ForgetPass(props: any) {
    const rform: any = useRef()
    const [form] = Form.useForm()
    const { history, location } = props
    let [count, setcount] = useState<number>(120)
    const [flag, setflag] = useState(true)
    const [toggle, settoggle] = useState(true)
    let timer: any = null
    useEffect(() => {

        let phone = new URLSearchParams(location.search).get('phone')
        if (phone) {
            rform.current.setFieldsValue({ 'phone': phone })
            settoggle(false)
        } else {
            rform.current.setFieldsValue({ 'phone': localStorage.getItem('phone') })
            settoggle(false)
        }


    }, [])
    const checkPhone = () => {
        form.validateFields(['phone'])
            .then(res => {
                settoggle(false)
            })
            .catch(err => {
                settoggle(true);
            })
    }
    const onFinish = async (v: any) => {
        //   console.log(v);

        let res: any = await ajax.resetpass(v)
        if (res.code == 200) {

            history.push('/login')
        }
    }
    const onFinishFailed = () => {
        toast.error('请输入正确的注册信息')

    }
    const sendCaputre = async () => {
        setcount(--count)
        setflag(false)
        timer = setInterval(() => {
            if (count > 0) {
                setcount(--count)
                setflag(false)
            } else {
                setcount(120)
                setflag(true)
                clearInterval(timer)
                timer = null
            }
        }, 1000)

        console.log(form.getFieldValue('phone'));
        let res = await ajax.sendcaptcha({
            phone: form.getFieldValue('phone')
        })
    }
    return (
        <div className='login'>
            <video
                src={require('../../assets/images/yanhua.mp4').default}
                className="myvideo"
                autoPlay
                loop
                muted
                playsInline
            ></video>
            <Row style={{ height: '100%' }}>
                <Col span={24} >
                    <div className="login-box" style={{ height: 400 }}>
                        <Title className="title" level={3}> 找回密码 </Title>
                        <div className="box">
                            <Form
                                name="normal_login"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                {...layout}
                                ref={rform}
                                form={form}
                            >
                                <Form.Item
                                    label="手机号"
                                    name="phone"
                                    rules={[{ required: true, message: '请输入手机号' },
                                    { pattern: reg.phone, message: '请输入正确的手机号' }]}
                                >
                                    <Input onChange={checkPhone} prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                                </Form.Item>

                                <Form.Item
                                    label="验证码"
                                    name="captcha"
                                    rules={[{ required: true, message: '请输入验证码' },
                                    { pattern: reg.code, message: '请输入4位的数字验证码' }]}
                                >
                                    <Row>
                                        <Col span={13}>
                                            <Input prefix={<LoadingOutlined className="site-form-item-icon" />} placeholder="请输入验证码" />
                                        </Col>

                                        <Col span={4} offset={2}>
                                            {
                                                flag ? <Button type="primary" onClick={sendCaputre} disabled={toggle}  > 发送验证码</Button>
                                                    : <Button type="primary" disabled > {`剩余${count}s`}</Button>
                                            }

                                        </Col>
                                    </Row>
                                </Form.Item>
                                <Form.Item
                                    label="新密码"
                                    name="password"
                                    rules={[{ required: true, message: '请输入新密码' },
                                    { pattern: reg.pwd, message: '请输入6-16位的数字加字母组合' }]}
                                >
                                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入新密码" />
                                </Form.Item>


                                <Form.Item {...layout2}>
                                    <Button type="primary" block htmlType='submit'> 修改密码</Button>
                                </Form.Item>

                                <Form.Item {...layout2}>
                                    <div className="links" style={{ width: '100%', display: 'flex', justifyContent: "flex-end" }}>
                                        <Link style={{ fontSize: 12, color: "#f50" }} to="/register"> 没有账号,立即注册?</Link>
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}

export default withRouter(ForgetPass)